<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="close"
      :title="title"
      :visible="dialogVisible"
      :destroy-on-close="true"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="formData.username"
                placeholder="请输入用户名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="昵称" prop="nickname">
              <el-input
                v-model="formData.nickname"
                placeholder="请输入昵称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱" prop="email ">
              <el-input
                v-model="formData.email"
                placeholder="请输入邮箱"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话" prop="phoneNumber ">
              <el-input
                v-model="formData.phoneNumber"
                placeholder="请输入电话"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" v-if="this.isAdd">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="formData.password"
                placeholder="请输入密码"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex" required>
              <el-radio-group v-model="formData.sex" size="mini">
                <el-radio-button
                  v-for="(item, index) in sexOptions"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="角色" prop="roleUid">
              <el-select
                v-model="formData.roleUid"
                placeholder="请选择角色"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in roleUidOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.uid"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status" required>
              <el-radio-group v-model="formData.status" size="mini">
                <el-radio-button
                  v-for="(item, index) in statusOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="备注" prop="remark ">
              <el-input
                v-model="formData.remark"
                type="textarea"
                placeholder="请输入备注"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="头像" prop="avatar">
              <el-upload
                :class="{ hidden: hidden }"
                :on-success="successHandle"
                ref="avatar"
                :file-list="avatarfileList"
                :action="avatarAction"
                :auto-upload="true"
                :before-upload="avatarBeforeUpload"
                list-type="picture-card"
                accept="image/*"
                :limit="limit"
                :on-remove="removeHandle"
                :headers="{ ACCESS_TOKEN: ACCESS_TOKEN }"
              >
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传不超过 5MB 的image/*文件
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

export default {
  inheritAttrs: false,
  components: {},
  props: {
    roleUidOptions: {
      type: Array
    }
  },
  mounted() {
    this.ACCESS_TOKEN = getToken();
  },
  data() {
    return {
      ACCESS_TOKEN: "",
      formData: {
        username: "",
        nickname: undefined,
        email: undefined,
        phoneNumber: undefined,
        sex: false,
        status: 3,
        roleUid: undefined,
        remark: undefined,
        avatar: null,
        password: ""
      },
      limit: 1,
      dialogVisible: false,
      isAdd: true,
      title: "编辑",
      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }
        ],
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur"
          }
        ],
        email: [],
        phoneNumber: [],
        roleUid: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change"
          }
        ],
        remark: []
      },
      sexOptions: [
        {
          label: "男",
          value: 1
        },
        {
          label: "女",
          value: 2
        }
      ],
      statusOptions: [
        {
          label: "未激活",
          value: 1
        },
        {
          label: "禁用",
          value: 2
        },
        {
          label: "启用",
          value: 3
        }
      ],
      // 图片上传路径
      avatarAction: "/sys/storage/upload",
      avatarfileList: []
    };
  },
  methods: {
    // 图片上传成功
    // {msg: "上传成功", code: 200, data: "20210325153305.png", success: true, time: "2021-03-25 15:33:36"}
    successHandle(res, file, fileList) {
      this.avatarfileList = fileList;
      this.formData.avatar = res.data;
    },
    // 上传图片移除钩子
    removeHandle(file, fileList) {
      this.avatarfileList = fileList;
    },
    onOpen() {},
    close() {
      this.dialogVisible = false;
    },
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        let param = JSON.parse(JSON.stringify(this.formData));
        if (this.isAdd) {
          this.$emit("addHandle", param);
        } else {
          this.$emit("editHandle", param);
        }
      });
    },
    avatarBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5;
      if (!isRightSize) {
        this.$message.error("文件大小超过 5MB");
      }
      let isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    },
    submitUpload() {
      this.$refs["avatar"].submit();
    }
  },
  computed: {
    hidden() {
      return this.avatarfileList.length == this.limit;
    }
  },
};
</script>
<style lang="scss" scoped>
.el-upload__tip {
  line-height: 1.2;
}
::v-deep .hidden .el-upload--picture-card {
  display: none;
}
</style>
